{% extends 'home/extends/base.html' %}

{% block title %}
    <title>我的订单</title>
{% endblock %}

<style>

</style>

{% block css %}
<link rel="stylesheet" type="text/css" href="/static/home/css/cart.css">
<link rel="stylesheet" type="text/css" href="/static/home/css/cart-app.css">
{% endblock %}


{% block paths %}
    <div class="navbar-left">
        <ol class="breadcrumb">
            <li class="active">购物车</li>
            <li  style="color:red;">确认订单</li>
            <li>在线支付</li>
            <li>完成 </li>
        </ol>
</div>
{% endblock %}


{% block con %}
<div class="mainbody cart" style="padding-top: 100px">
		<div class="container">
        <div class="row" style="background: #fff;">
            <div class="col-md-10">
               <h3 style="padding-top: 10px;">收货地址</h3>
                <button type="button" class="btn btn-link " data-toggle="modal" data-target="#myModal">
                    新增地址
                </button>
                <!-- 模态框 -->
                <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
                 <div class="modal-dialog" role="document">
                   <div class="modal-content">
                     <div class="modal-header">
                       <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                       <h4 class="modal-title" id="myModalLabel">新增地址</h4>
                     </div>
                    <form>
                     <div class="modal-body">
                         <div class="form-group">
                           <label >收货人</label>
                           <input type="text" name="addressname" class="form-control">
                         </div>
                         <div class="form-group">
                           <label >收货地址</label>
                           <input type="text" name="address" class="form-control">
                         </div>

                         <div class="form-group">
                           <label >收货电话</label>
                           <input type="text" name="addressphone" class="form-control">
                         </div>

                         <div class="checkbox">
                           <label>
                             <input type="checkbox" name="status" value="1"> 是否默认
                           </label>
                         </div>

                     </div>
                     <div class="modal-footer">
                       <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                       <button type="button" class="btn btn-primary" id="CreateAddress">添加</button>
                     </div>
                    </form>
                   </div>
                 </div>
               </div>
            </div>
            <br><br><br>
            {% for v in adds %}
                {% if v.status == 1 %}
                <div class="col-md-3" >
                    <address aid="{{ v.id }}" isstatus='true' style="border:2px dashed #f39;">
                      <strong>{{ v.addressname }}</strong><br>
                     {{ v.address }}<br>
                      <abbr title="Phone">P:</abbr>{{ v.addressphone }}
                      <span style="color: red;float: right">默认地址</span>
                    </address>
                </div>
                {% elif v.status == 0 %}
                <div class="col-md-3" >
                    <address  aid="{{ v.id }}" style="border:2px solid #ccc;">
                      <strong>{{ v.addressname }}</strong><br>
                     {{ v.address }}<br>
                      <abbr title="Phone">P:</abbr>{{ v.addressphone }}
                    </address>
                </div>
                {% endif %}
            {% endfor %}



        </div>
			<!-- 购物车详情头 -->
			<table class="cart-header">
				<tbody>
					<tr>
						<td class="cart-col-name col-md-3 hidden-xs hidden-sm">商品缩略图</td>
						<td class="cart-col-name col-md-3 hidden-xs hidden-sm">商品</td>
						<td class="cart-col-price col-md-2 hidden-xs hidden-sm">单价(元)</td>
						<td class="cart-col-number col-md-2 hidden-xs hidden-sm">数量</td>
						<td class="cart-col-total col-md-1 hidden-xs hidden-sm">小计(元)</td>

					</tr>
				</tbody>
			</table><!-- 购物车详情头 E-->

			<!-- 购物清单信息列表 -->
			<div class="cart-merchant-list">
				<div class="cart-merchant">
					<table class="cart-merchant-body">
						<tbody>
                            <!-- 获取 购物车 session 的所有值 -->
                            {% for v in data.values %}
                                <tr class="cart-product" gid="{{ v.gid }}" >
								<td class="cart-col-select col-md-3 col-xs-4 col-sm-4">

									<a href="meilanx.html" class="cart-product-link" target="_blank">
										<img src="{{ v.gpic }}" class="cart-product-img" alt="魅蓝 X">
									</a>
								</td>
								<td class="cart-col-name col-md-3 col-xs-8 col-sm-8">
									<a href="meilanx.html" class="cart-product-link" target="_blank">
									  <p>{{ v.gname }}</p>
									  <span class="cart-product-desc">全网通公开版 流光金 32GB</span>
									</a>

									<div class="cart-col-number">
										<div class="cart-product-number-adder">
											<p class="cart-product-number-max show"></p>
											<div class="mz-adder">
												<button class="mz-adder-subtract disabled"></button>
												<div class="mz-adder-num"><input class="mz-adder-input" value="1" type="text"></div>
												<button class="mz-adder-add"></button>
											</div>
										</div>
									</div>
								</td>
								<td class="cart-col-price col-md-2 hidden-xs hidden-sm">
									<p>
										<span class="cart-product-price">{{ v.gprice }}</span>
									</p>
								</td>
								<td class="cart-col-number col-md-2 hidden-xs hidden-sm">
									<div class="cart-product-number-adder">
										<p class="cart-product-number-max show"></p>
										<div class="mz-adder">

											<div class="mz-adder-num">
                                                <input  class="mz-adder-input numbers" value="{{ v.gnum }}" type="text">
                                            </div>

										</div>
									</div>
								</td>
								<td class="cart-col-total col-md-1 hidden-xs hidden-sm">
                                    {% load pagetag %}
									<span class="cart-product-price total">{% ShowTotal v.gnum v.gprice %}</span>
								</td>

							</tr>

                            {% endfor %}



						</tbody>
					</table>
				</div>
			</div><!-- 购物清单信息列表 E-->
		</div>
		<!-- 结算详情 -->
		<div class="cart-footer" id="cartFooter">
			<div class="container">
			   <div class="cart-footer-left col-md-5 col-xs-4 col-sm-4">

				   <!-- <span class="cart-remove-selected" id="removeSelected">删除选中的商品</span> -->
				   <span class="cart-footer-count">
						共
						<span class="cart-footer-num" id="totalCount">0</span>
						件商品
				   </span>
				</div>
				<div class="cart-footer-right col-md-6 col-md-offset-1 col-sm-offset-2 col-xs-8 col-sm-6">
					<span class="cart-footer-sum">
						<span class="cart-footer-text">已优惠</span>
						<span class="cart-footer-num red" id="totalDiscount">0.00</span>
						<span class="cart-footer-text">元， 合计(不含运费)：</span>
						<span class="cart-footer-total" id="totalPrice">0.00</span>
					</span>
                    <form action="{% url 'home_order_create' %}" method="post" style="display: inline-block">
                         {% csrf_token %}
                        <input type="hidden" name="ids" value="{{ request.GET.ids }}">
                        <input type="hidden" name="addid" value="">
					    <button class="mz-btn success" id="cartSubmit">提交订单</button>
                    </form>
				</div>
			</div>
		</div><!-- 结算详情 E-->
	</div>
{% endblock %}


{% block js %}
<script type="text/javascript">

            //回顶部
      		backTop();
      		//全选
      		allSelect();
            //登录图片鼠标经过
            topLogin();

      		// 提交订单事件
            $('#cartSubmit').click(function(){
                // 判断当前是否选择了收货地址
                var addid = $('input[name=addid]').val()
                console.log(addid)
                if(!addid){
                    alert('没有选择收货地址')
                    return false;
                }
            })

            // 获取默认地址
            $('address').each(function () {
                // 如果当前address(地址) 中属性 isstatus 的值 为真 （就是默认地址）
                if($(this).attr('isstatus')){
                    // 将该地址的 id 写入到 提交地址的 隐藏域中
                    $('input[name=addid]').val($(this).attr('aid'))
                }
            })

            // 给所有的地址绑定单击事件
            $('address').click(function () {
                // 将所有的地址边框变白色
                $('address').css('border','2px solid #ccc')
                // 给点击的元素边框变红色
                $(this).css('border','2px dashed #f39')
                // 获取当前点击的地址的 id
                var aid = $(this).attr('aid')
                // 将当前点击地址 的id 写入提交地址id的隐藏域
                $('input[name=addid]').val(aid)
            })

            totalNum();
      		// 计算总价  在 topnav.js 中 单选与全选之中引用
            function totalNum() {
                // 定义总价为0
                var totalprice = 0.00
                var totalCount = 0

                // 获取所有已选择的商品元素的小计价格 已经选择的商品 html 会多一个 checked
                //  each  循环的方法 当获取的商品有多种时，需分别获取小计
                $('.cart-merchant-body').find('tr').each(function () {
                    // 获取单个小计价格  $(this) 为选择框 通过父级元素 tr 找 小计
                    total = Number($(this).find('.total').text())
                    // 获取单个 数量
                    sum = Number($(this).find('.numbers').val())
                    // 获取选中商品的 id

                    {#alert(total)#}
                    // 将单个小计价格 加给总价
                    totalprice += total
                    totalCount += sum
                    // 将 id 写入 ids
                })
                // 将总价写入页面
                $('#totalPrice').text(totalprice)
                // 将总数量写到页面
                $('#totalCount').text(totalCount)

            }

            // 地址的添加
            $('#CreateAddress').click(function () {
                var data = {}
                // 获取表单中的数据
                // 获取收货人
                data.addressname = $(this).parents('form').find('input[name=addressname]').val();
                // 获取收货地址
                data.address = $(this).parents('form').find('input[name=address]').val();
                // 获取联系电话
                data.addressphone = $(this).parents('form').find('input[name=addressphone]').val();
                // 设置状态为0
                data.status = 0;
                // 如果选择了默认地址 那把状态改为1   porp()：选中的复选框为True 没选为False
                if($(this).parents('form').find('input[name=status]').prop('checked')){
                    data.status = 1
                }
                // 发送ajax 请求
                $.get('{% url 'home_address_insert' %}',data,function(data){
                    if(data.error == 0){
                        location.href = location.href
                    }
                    alert(data.msg)
                })
            })




	</script>
{% endblock %}


